<template>
	<view class="content">
		<view class="message" v-for="(item,index) in messages" :key="index" @tap="go_url(item.messageUrl)">
			<view class="top">
				<text>{{item.messageTitle}}</text>
				<image src="../../static/images/right.png" mode=""></image>
			</view>
			<view class="detail">
				{{item.messageContent}}
			</view>
			<view class="time">
				{{timeAgo(item.createTime)}}
			</view>
		</view>
		<view class="tips" v-if="messages.length!=0" @tap="more">{{content}}</view>
		<view class="tips" v-if="messages.length==0" >暂无消息通知</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js"
	export default {
		methods: {
			more() {
				if(this.content=='点击加载更多'){
					let pId = this.pageId;
					this.getMessageList(pId + 1, 1);
				}
			},
			go_url(url) {
				uni.navigateTo({
					url: url
				});
			},
			getMessageList(pageId, type) {
				let that = this;
				let userId = this.user.id;
				utils.get("message/getmessage", {
					userId,
					pageId
				}, function(data) {
					if (type == 0) {
						that.content = "点击加载更多";
						that.messages = data;
						uni.stopPullDownRefresh();
					} else {
						if (data.length == 0) {
							that.content = "已经到底了"
						} else {
							that.messages.push.apply(that.messages, data);
							that.pageId++;
						}

					}
				});
			},
			timeAgo(dateTimeStamp) {
				var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime(); //获取当前时间毫秒
				var diffValue = now - dateTimeStamp; //时间差

				if (diffValue < 0) {
					return;
				}
				var result = "";
				var minC = diffValue / minute; //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour;
				var dayC = diffValue / day;
				var weekC = diffValue / week;
				var monthC = diffValue / month;
				if (monthC >= 1 && monthC <= 3) {
					result = " " + parseInt(monthC) + "月前"
				} else if (weekC >= 1 && weekC <= 3) {
					result = " " + parseInt(weekC) + "周前"
				} else if (dayC >= 1 && dayC <= 6) {
					result = " " + parseInt(dayC) + "天前"
				} else if (hourC >= 1 && hourC <= 23) {
					result = " " + parseInt(hourC) + "小时前"
				} else if (minC >= 1 && minC <= 59) {
					result = " " + parseInt(minC) + "分钟前"
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = "刚刚"
				} else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			}
		},
		computed: {
			...mapState(['user']),
		},
		data() {
			return {
				messages: [],
				pageId: 1,
				content: "点击加载更多"
			};
		},
		onTabItemTap() {
			uni.hideTabBarRedDot({
				index:2
			});
		},
		onLoad() {
			utils.loading("加载中...");
			this.getMessageList(1, 0);
		},
		onPullDownRefresh() {
			this.getMessageList(1, 0);
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;

	}

	.message {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 220upx;
		background-color: #ffffff;
		margin-top: 30upx;
	}

	.top {
		width: 100%;
		display: flex;
		height: 54upx;
		margin-top: 8upx;
		align-items: center;

	}

	.top text {
		font-size: 33upx;
		flex: 1;
		margin-left: 25upx;
	}

	.top image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.detail {
		font-size: 29upx;
		width: 700upx;
		height: 80upx;
		padding: 0 25upx;
		margin-top: 20upx;


	}

	.time {
		width: 700upx;
		padding: 0 25upx;
		height: 50upx;
		color: #666;
		line-height: 50upx;
		font-size: 28upx;
		margin-top: 3upx;
	}

	.dis {
		opacity: 0.6;
	}

	.tips {
		width: 100%;
		height: 80upx;
		font-size: 30upx;
		color: #666;
		line-height: 80upx;
		text-align: center;
	}
</style>
